<template>
	<view class="content">
		<view class="head">
			<view class="content-head">
				<view class="content-head-item">
					<view class="content-left" v-for="(item,index) in firstList" :key="index">
						<view class="content-item-top">
							<image class="content-item-top-img"
								:src="'https://abc.apricity.asia/public/icon/win' + index + '.png'" mode="aspectFit">
							</image>
							<view class="content-item-content">
								<u--image shape="circle" :src="item.info" width="60px" height="60px"></u--image>
							</view>
							<view class="content-item-content-text">
								<text class="content-item-content-text-top">{{item.nickname}}</text>
								<text class="content-item-content-text-center">{{item.orderNumber}}单</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="title">
			<view class="icon" @click="navaBack">
				<u-icon size="22" name="arrow-left" color="#fff"></u-icon>
			</view>
			<view class="title-text">
				排行榜
			</view>
			<view></view>
		</view>
		<view class="my-page page" v-if="myList.info">
			<u-cell  :clickable="true" :title="myList.nickname" :value="'总收入:' + myList.money + '元' + '            ' + myList.orderNumber + '单'">
				<text>{{4}}</text>
				<u-avatar slot="icon" shape="square" size="35" :src="myList.info"
					customStyle="margin: -3px 5px -3px 0"></u-avatar>
			</u-cell>
		</view>
		
		<view class="page">
	
					<u-cell v-for="(item, index) in list" :key="index" :clickable="true" :title="item.nickname" :value="item.orderNumber + '单'">
						<text>{{index + 4}}</text>
						<u-avatar slot="icon" shape="square" size="35" :src="item.info"
							customStyle="margin: -3px 5px -3px 0"></u-avatar>
					</u-cell>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				firstList: [],
				myList: {},
				accounts: ''
			};
		},
		methods: {
			/**
			 * 返回
			 */
			navaBack() {
				uni.navigateBack()
			},
			/**
			 * 获取自己的信息
			 */
			async getMyData () {
				try {
					const {
						data: res
					} = await uni.$http.get('/order/getUserAccounts');
					if (res.status !== 200) return 
					this.accounts = res.accounts
				} catch (e) {
					
				}
			},
			/**
			 * 获取排行榜信息数据
			 */
			async getAllMoneyData() {
				try {
					const {
						data: res
					} = await uni.$http.get('/order/getAllOrderMoney');
					if (res.status !== 200) return uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 2000
					})
					// 获取的数据还没有排序，需要排序
					for (let i = 0; i < res.data.length; i++) {
						for (let j = i + 1; j < res.data.length; j++) {
							if (res.data[i].orderNumber < res.data[j].orderNumber) {
								let m = 0;
								m = res.data[j].orderNumber;
								res.data[j].orderNumber = res.data[i].orderNumber;
								res.data[i].orderNumber = m;
							}
						}
					}
					let data = res.data;
					this.firstList = res.data.splice(0, 3);
					this.list = res.data;
					// 默认是从大到小，需要交换0-1的位置
					let t = this.firstList[0];
					this.firstList[0] = this.firstList[1];
					this.firstList[1] = t;
					const findResult = data.findIndex((item) => {
						return item.accounts === this.accounts
					})
					if (findResult === -1) return
					this.myList = data[findResult]
				} catch (e) {
					uni.showToast({
						icon: 'none',
						title: e,
						duration: 2000
					})
				}
			}
		},
		onLoad() {
			this.getMyData();
			this.getAllMoneyData();
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #FFF;
	}
	.my-page {
		margin: 10px 0;
	}
	.content {
		background: #f3f4f5;
		height: 100vh;
		width: 100vw;
		& .head {
			height: 30%;
			background: #00e4c5;
			border-bottom: #00e4c5;
		}

		& .title {
			width: 100vw;
			position: fixed;
			top: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			& .icon {
				margin-left: 5px;
			}

			& .title-text {
				color: #FFF;
				margin-left: -20px;
				display: flex;
				font-size: 20px;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.content-head-item .content-left:nth-child(2) {
		padding-bottom: 40px;
	}

	.content-head {
		padding-top: 80px;

		& .content-head-item {
			width: 90%;
			margin: 0 1% 0 4%;
			display: flex;
			align-items: center;
			justify-content: space-around;

			& .content-left {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				& .content-item-top {
					& .content-item-top-img {
						margin-bottom: -8px;
						width: 100px;
						height: 30px;
					}

					& .content-item-content {
						display: flex;
						align-items: center;
						justify-content: center;
					}

					& .content-item-content-text {
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FFF;
						flex-direction: column;

						& .content-item-content-text-top {
							font-size: 16px;
						}

						& .content-item-content-text-center {
							font-size: 14px;
						}
					}
				}
			}
		}
	}
</style>
